<template>
  <v-card title="反转表格">
    <vcu-table
      border
      class="reverse-table"
      :show-header="false"
      :columns="tableColumn"
      :data="tableData"
    ></vcu-table>
  </v-card>
</template>
<script>
export default {
  data() {
    return {
      tableColumn: [
        { field: "id", title: "ID" },
        { field: "name", title: "Name" },
        { field: "role", title: "Role" },
        { field: "sex", title: "Sex" },
        { field: "age", title: "Age" },
        { field: "address", title: "Address" },
        { field: "rate", title: "Rate" },
        { field: "date3", title: "Date" },
        { field: "updateTime", title: "UpdateTime" },
        { field: "createTime", title: "CreateTime" },
      ],
      tableData: [
        {
          id: 10001,
          name: "Test1",
          nickname: "T1",
          role: "Develop",
          sex: "Man",
          age: 28,
          rate: 2,
          address: "Shenzhen",
          date3: "20:30",
          updateTime: "2020-09-16",
          createTime: "2020-09-16",
        },
        {
          id: 10002,
          name: "Test2",
          nickname: "T2",
          role: "Test",
          sex: "Women",
          age: 22,
          rate: 2,
          address: "Beijin",
          date3: "20:30",
          updateTime: "2019-09-16",
          createTime: "2020-09-16",
        },
        {
          id: 10003,
          name: "Test3",
          nickname: "T3",
          role: "PM",
          sex: "Man",
          age: 32,
          rate: 6,
          address: "Shanghai",
          date3: "20:30",
          updateTime: "2020-09-16",
          createTime: "2021-09-16",
        },
        {
          id: 10004,
          name: "Test4",
          nickname: "T4",
          role: "Designer",
          sex: "Women ",
          age: 23,
          rate: 2,
          address: "Shenzhen",
          date3: "20:30",
          updateTime: "2020-09-16",
          createTime: "2020-09-16",
        },
        {
          id: 10005,
          name: "Test5",
          nickname: "T5",
          role: "Develop",
          sex: "Women ",
          age: 30,
          rate: 10,
          address: "Shanghai Beijin Shenzhen",
          date3: "20:30",
          updateTime: "2020-01-16",
          createTime: "2020-10-16",
        },
        {
          id: 10006,
          name: "Test6",
          nickname: "T6",
          role: "Designer",
          sex: "Women ",
          age: 21,
          rate: 2,
          address: "Shenzhen",
          date3: "20:30",
          updateTime: "2018-09-16",
          createTime: "2020-09-16",
        },
        {
          id: 10007,
          name: "Test7",
          nickname: "T7",
          role: "Test",
          sex: "Man ",
          age: 29,
          rate: 3,
          address: "Shenzhen",
          date3: "20:30",
          updateTime: "2020-01-16",
          createTime: "2020-10-16",
        },
        {
          id: 10008,
          name: "Test8",
          nickname: "T8",
          role: "Develop",
          sex: "Man ",
          age: 35,
          rate: 2,
          address: "Beijin Beijin Beijin",
          date3: "20:30",
          updateTime: "2017-09-16",
          createTime: "2020-09-16",
        },
        {
          id: 10009,
          name: "Test9",
          nickname: "T9",
          role: "Test",
          sex: "Man ",
          age: 29,
          rate: 3,
          address: "Shenzhen",
          date3: "20:30",
          updateTime: "2020-01-16",
          createTime: "2020-10-16",
        },
        {
          id: 10010,
          name: "Test10",
          nickname: "T10",
          role: "Develop",
          sex: "Man ",
          age: 50,
          rate: 5,
          address: "Shenzhen",
          date3: "20:30",
          updateTime: "2017-09-16",
          createTime: "2020-09-16",
        },
      ],
    };
  },
  created() {
    this.reverseTable2(this.tableColumn, this.tableData);
  },
  methods: {
    // 反转函数
    reverseTable2(columns, list) {
      const buildData = columns.map((column) => {
        const item = { col0: column.title };
        list.forEach((row, index) => {
          item[`col${index + 1}`] = row[column.field];
        });
        return item;
      });
      const buildColumns = [
        {
          field: "col0",
          fixed: "left",
          width: 120,
        },
      ];
      list.forEach((item, index) => {
        buildColumns.push({
          field: `col${index + 1}`,
          minWidth: 120,
        });
      });
      this.tableData = buildData;
      this.tableColumn = buildColumns;
    },
  },
};
</script>
<style>
.reverse-table .vcu-body--row .vcu-body--column:first-child {
  background-color: #f8f8f9;
}
</style>
